<template>
  <el-table :data="list" style="width: 100%">
    <el-table-column prop="id" label="序号" width="180" />

    <el-table-column prop="title" label="标题" width="180" />
    <el-table-column prop="content" label="内容" width="180" />
    <el-table-column label="状态" width="180">
      <template #default="scope">
        <el-switch
          v-model="scope.row.status"
          @change="handleStatusChange(scope.row)"
        />
      </template>
    </el-table-column>

    <!-- 按钮 -->
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-popconfirm
          width="220"
          confirm-button-text="是的!"
          cancel-button-text="不了，谢谢！"
          icon-color="#626AEF"
          title="真的要删除吗？"
          @confirm="handleDelete(scope.$index, scope.row)"
        >
          <template #reference>
            <el-button size="small" type="danger"> 删除 </el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 修改 -->
  <el-dialog v-model="dialogFormVisible" title="修改内容" width="500">
    <el-form-item label="标题" :label-width="formLabelWidth">
      <el-input v-model="obj.title" autocomplete="off" />
    </el-form-item>
    <el-form-item label="内容" :label-width="formLabelWidth">
      <el-input v-model="obj.content" autocomplete="off" />
    </el-form-item>
    <el-form-item label="状态" :label-width="formLabelWidth">
      <el-switch v-model="obj.status" />
    </el-form-item>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="OKHandle"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { ListAPI, DeleteAPI, DateAPI } from "../api/api";
import { ElMessage } from "element-plus";
// 列表
let list = ref([]);
function loadlist() {
  ListAPI().then((r) => {
    console.log(r.data);
    list.value = r.data;
  });
}
loadlist();
// 删除按钮
const handleDelete = (index, row) => {
  console.log(index, row);
  DeleteAPI(row.id).then((r) => {
    ElMessage({
      message: "删除成功",
      type: "success",
      plain: true,
    });
    loadlist();
  });
};
//编辑按钮

const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
let obj = ref({});
let ida = ref("");
const handleEdit = (index, row) => {
  console.log(index, row);
  obj.value = { ...row };
  ida.value = row.id;
  dialogFormVisible.value = true;
};

const OKHandle = () => {
  let objs = {
    title: obj.value.title,
    content: obj.value.content,
    status: obj.value.status,
  };
  DateAPI(ida.value, objs).then((r) => {
    console.log(r.data);
    dialogFormVisible.value = false;
    loadlist();
  });
};
// 状态
const handleStatusChange = (row) => {
  let objss = {
    title: row.title,
    content: row.content,
    status: row.status,
  };
  console.log(row);
  DateAPI(row.id, objss).then((r) => {
    console.log(r.data);
    loadlist();
  });
};
</script>
<style></style>
